<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>UserInfo</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        header{
            text-align: center;
        }
        th{
            text-align: center;
        }
        table{
            text-align: center;
        }
    </style>

</head>
<body>
<nav class="navbar navbar-default">
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left" action="/SearchAll">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="UserName" name="user_name" id="user_name" th:value="${condition.get('user_name')}">
                    <input type="text" class="form-control" placeholder="Building"  name="building" id="building" th:value="${condition.get('building')}">
                    <input type="text" class="form-control" placeholder="RoomNumber" name="room_number" id="room_number" th:value="${condition.get('room_number')}">
                    <input type="date" class="form-control" placeholder="Time" name="lastest_time" id="lastest_time" th:value="${condition.get('lastest_time')}">
                    <input type="text" class="form-control" placeholder="Temperature" name="lastest_temp" id="lastest_temp" th:value="${condition.get('lastest_temp')}">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
                <button type="button" class="btn btn-default" id="reset">重置</button>
            </form>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<header>
    <h1>住户信息</h1>
</header>
<div class="container">
    <table border="1" class="table table-bordered table-hover" id="userinfo_table">
        <tr class="success">
            <th>用户名</th>
            <th>身份证</th>
            <th>栋号</th>
            <th>房号</th>
            <th>最新出入时间</th>
            <th>最新温度</th>
        </tr>
        <tr th:each="userInfo,userInfoStat:${pageBean.list}">
            <td th:text="${userInfo.user_name}"></td>
            <td th:text="${userInfo.user_id_card}"></td>
            <td th:text="${userInfo.building}"></td>
            <td th:text="${userInfo.room_number}"></td>
            <td th:text="${userInfo.lastest_time}"></td>
            <td th:text="${userInfo.lastest_temp}"></td>
        </tr>
    </table>
</div>
<div class="container">
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a th:if="${pageBean.getCurrentPage()} >1 " th:href="'SearchAll?currentPage='+${pageBean.getCurrentPage()+1}+'&user_name='+${condition.get('user_name')}+'&building='+${condition.get('building')}+'&room_number='+${condition.get('room_number')}+'&lastest_time='+${condition.get('lastest_time')}+'&lastest_temp='+${condition.get('lastest_temp')}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li th:each="page:${#numbers.sequence(1,pageBean.getTotalPage())}">
                <a th:href="'SearchAll?currentPage='+${page}+'&user_name='+${condition.get('user_name')}+'&building='+${condition.get('building')}+'&room_number='+${condition.get('room_number')}+'&lastest_time='+${condition.get('lastest_time')}+'&lastest_temp='+${condition.get('lastest_temp')}" th:text="${page}" th:if="${page eq pageBean.currentPage}" th:id="active"></a>
                <a th:href="'SearchAll?currentPage='+${page}+'&user_name='+${condition.get('user_name')}+'&building='+${condition.get('building')}+'&room_number='+${condition.get('room_number')}+'&lastest_time='+${condition.get('lastest_time')}+'&lastest_temp='+${condition.get('lastest_temp')}" th:text="${page}" th:if="${page ne pageBean.currentPage}"></a>
            </li>
            <li>
                <a th:if="${pageBean.getCurrentPage()} < ${pageBean.getTotalPage()}" th:href="'SearchAll?currentPage='+${pageBean.getCurrentPage()+1}+'&user_name='+${condition.get('user_name')}+'&building='+${condition.get('building')}+'&room_number='+${condition.get('room_number')}+'&lastest_time='+${condition.get('lastest_time')}+'&lastest_temp='+${condition.get('lastest_temp')}" aria-label="Previous">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    let li = window.document.getElementById("active").parentNode;
    li.setAttribute("class","active");
    window.document.getElementById("reset").onclick = function () {
        window.document.getElementById("user_name").value = "";
        window.document.getElementById("building").value = "";
        window.document.getElementById("room_number").value = "";
        window.document.getElementById("lastest_time").value = "";
        window.document.getElementById("lastest_temp").value = "";
    }
</script>
</body>
</html>